<template>
  <div class="Realnameauthentication">
    <div class="Realnameauthentication-title">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/views/Learningcenter/Authenticationmanagement' }">认证管理</el-breadcrumb-item>
        <el-breadcrumb-item>实名认证</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="Realnameauthentication-con">
      <div class="Realnameauthentication-con-title">
        <label>
          <i>*</i>
          <span>姓名</span>
          <input autocomplete="off" type="text" name="username" v-model="username" />
          <span style="width:34%">（请确保姓名和身份证号一致）</span>
        </label>
        <label>
          <i>*</i>
          <span>证件号码</span>
          <input autocomplete="off" type="text" name="username" v-model="cardID" />
        </label>
        <label>
          <i>*</i>
          <span>国籍</span>
          <input autocomplete="off" type="text" name="username" v-model="nationality" />
        </label>
      </div>
      <div class="Realnameauthentication-con-con">
        <h1>上传身份证照片</h1>
        <div class="Upload-images">
          <ul>
            <li>
              <el-upload
                class="avatar-uploader"
                action="http://up-z0.qiniup.com"
                :show-file-list="false"
                :on-success="handleAvatarSuccessFrontofidcard"
                :before-upload="beforeUploadGetKey"
                :data="QiNiYun"
              >
                <img v-if="FrontofidcardimageUrl" :src="FrontofidcardimageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </li>
            <li>
              <el-upload
                class="avatar-uploader"
                action="http://up-z0.qiniup.com"
                :show-file-list="false"
                :on-success="handleAvatarSuccessIdcardreverseimageUrl"
                :before-upload="beforeUploadGetKeyss"
                :data="QiNiYunss"
              >
                <img v-if="IdcardreverseimageUrl" :src="IdcardreverseimageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </li>
            <li class="instructions">上传证件必须清晰可见</li>
            <li>
              <img v-if="referenceimageUrl" :src="referenceimageUrl" class="avatar" />
            </li>
            <li>
              <el-upload
                class="avatar-uploader"
                action="http://up-z0.qiniup.com"
                :show-file-list="false"
                :on-success="handleAvatarSuccesshandheldimageUrl"
                :before-upload="beforeUploadGetKeys"
                :data="QiNiYuns"
              >
                <img v-if="handheldimageUrl" :src="handheldimageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </li>
            <li class="instructions">请确认照片中身份证信息清晰，露出手臂</li>
            <li class="Submitaudit" @click="submit">
              <span>提交审核</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="Realnameauthentication-con-footer">
        <div class="Realnameauthentication-con-footer-title">重要提示：</div>
        <ul>
          <li>照片仅供后台审核使用，绝不对外展示</li>
          <li>为什么要实名认证？如何保护隐私？</li>
          <li>
            Tmore是一款跨境社交APP，有很多国外的用户，需要委托境外的身份证认证机构进行认证。国内实名认证也会通过官方认证库进行比对认证，
            剔除有犯罪行为的人群，保证平台的安全性和真实性。您的身份信息仅供用于实名认证，不会被任何人看到，Qmore平台会保障您的信息安全。
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Realnameauthentication",
  data() {
    return {
      username: "",
      cardID: "",
      nationality: "",
      FrontofidcardimageUrl: "/images/上传身份证正面@2x.png",
      IdcardreverseimageUrl: "/images/上传身份证反面@2x.png",
      referenceimageUrl: "/images/参考图例 拷贝@2x.png",
      handheldimageUrl: "/images/上传手持身份照片@2x.png",
      tabIndex: localStorage.getItem("tablesListindex"),
      urls: "",
      unserinfo: JSON.parse(localStorage.getItem("userinfo")),
      domain: "http://up-z0.qiniup.com",
      qiniuaddr: "http://101.37.66.151:8768/eg-api/push/upload/getToken",
      upload_qiniu_addr: "http://img.curiousmore.com/",
      QiNiYun: {
        key: "avator",
        token: ""
      },
      QiNiYuns: {
        key: "avator",
        token: ""
      },
      QiNiYunss: {
        key: "avator",
        token: ""
      }
    };
  },
  creted() {
    if (this.tabIndex == 3) {
      this.urls = "/views/Teachingcenters/Authenticationmanagement";
    } else {
      this.urls = "/views/Learningcenter/Authenticationmanagement";
    }
  },
  mounted() {
    this.getQiniuToken();
    this.getQiniuTokens();
    this.getQiniuTokenss();
  },
  methods: {
    getQiniuToken() {
      var data = {
        key: this.guid(),
        type: "pic"
      };
      this.$axios({
        method: "POST",
        url: this.qiniuaddr,
        data: data
      })
        .then(response => {
          this.QiNiYun.token = response.data.data;
          this.QiNiYun.key = data.key;
        })
        .catch(error => {
          console.log(error);
        });
    },
    getQiniuTokens() {
      var data = {
        key: this.guid(),
        type: "pic"
      };
      this.$axios({
        method: "POST",
        url: this.qiniuaddr,
        data: data
      })
        .then(response => {
          this.QiNiYuns.token = response.data.data;
          this.QiNiYuns.key = data.key;
        })
        .catch(error => {
          console.log(error);
        });
    },
    getQiniuTokenss() {
      var data = {
        key: this.guid(),
        type: "pic"
      };
      this.$axios({
        method: "POST",
        url: this.qiniuaddr,
        data: data
      })
        .then(response => {
          this.QiNiYunss.token = response.data.data;
          this.QiNiYunss.key = data.key;
          console.log(this.QiNiYunss);
        })
        .catch(error => {
          console.log(error);
        });
    },
    beforeUploadGetKey() {
      //每个文件上传之前 给它一个 名字
      //  this.QiNiYun.key = this.guid();
      this.getQiniuToken();
    },
    beforeUploadGetKeys() {
      //每个文件上传之前 给它一个 名字
      //  this.QiNiYun.key = this.guid();
      this.getQiniuTokens();
    },
    beforeUploadGetKeyss() {
      //每个文件上传之前 给它一个 名字
      //  this.QiNiYun.key = this.guid();
      this.getQiniuTokenss();
    },
    submit() {
      //this.$message("请选择班级");
      if (this.username == "") {
        this.$message("请输入姓名");
        return;
      }
      if (this.cardID == "") {
        this.$message("请输入身份证号");
        return;
      }
      if (this.nationality == "") {
        this.$message("请输入国籍");
        return;
      }
      if (/上/.test(this.FrontofidcardimageUrl)) {
        this.$message("请上传身份证正面照片");
        return;
      }
      if (/上/.test(this.IdcardreverseimageUrl)) {
        this.$message("请上传身份证反面照片");
        return;
      }
      if (/上/.test(this.handheldimageUrl)) {
        this.$message("请上传手持身份证照片");
        return;
      }
      let data = {
        id_back: this.IdcardreverseimageUrl, //身份证背面
        id_card: this.cardID, //身份证号
        id_frount: this.FrontofidcardimageUrl, //身份证正面
        id_onhand: this.handheldimageUrl, //手持身份证
        nationality: this.nationality, //国籍
        user_id: this.unserinfo.user_id,
        user_name: this.username
      };
      this.$axios({
        method: "POST",
        url: "http://101.37.66.151:8768/eg-api/user/userIdentity/insert",
        data: data
      })
        .then(res => {
          console.log(res.data.data);
        })
        .catch(error => {
          console.log(error);
        });
    },
    handleAvatarSuccessFrontofidcard(res, file) {
      //上传身份证正面
      this.FrontofidcardimageUrl = this.upload_qiniu_addr + res.key;
      console.log(this.FrontofidcardimageUrl);
    },
    handleAvatarSuccessIdcardreverseimageUrl(res, file) {
      //上传身份证反面
      this.IdcardreverseimageUrl = this.upload_qiniu_addr + res.key;
      console.log(this.IdcardreverseimageUrl);
    },
    handleAvatarSuccesshandheldimageUrl(res, file) {
      //上传手持身份证照片
      this.handheldimageUrl = this.upload_qiniu_addr + res.key;
      console.log(this.FrontofidcardimageUrl);
    }
  }
};
</script>
<style lang="less" scoped>
.Realnameauthentication {
  position: relative;
  width: 90%;
  background: #ffffff;
  border-radius: 20px;
}
.Realnameauthentication-title {
  position: relative;
  width: 90%;
  height: 40px;
  margin: 0 auto;
  border-bottom: 1px solid #2dc7c8;
  padding-top: 40px;
  /deep/.el-breadcrumb {
    border-left: 14px solid #2dc7c8;
    padding-left: 2%;
  }
  /deep/.el-breadcrumb__inner {
    color: #2dc7c8 !important;
    font-size: 20px !important;
    font-weight: bold !important;
  }
  /deep/.el-breadcrumb__separator {
    color: #2dc7c8;
  }
  /deep/.el-breadcrumb__inner.is-link {
    color: #2dc7c8;
    font-size: 20px;
    font-weight: bold;
  }
}
.Realnameauthentication-con {
  position: relative;
  width: 90%;
  margin: 0 auto;
  label {
    display: block;
    width: 80%;
    text-align: left;
    margin-top: 20px;
    height: 40px;
    span {
      display: inline-block;
      width: 10%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 12px;
      color: #c0c0c0;
    }
    i {
      color: #ff7336;
    }
    input {
      width: 40%;
      margin-left: 2%;
      height: 30px;
      border: 1px solid #cecece;
      padding: 2px 10px 2px 10px;
      outline: none;
    }
  }
}
.Realnameauthentication-con-con {
  position: relative;
  width: 100%;
  margin-top: 40px;
  h1 {
    font-size: 16px;
    color: #2dc7c8;
  }
  ul {
    position: relative;
    list-style: none;
    padding: 0;
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      width: 40%;
      margin-top: 30px;
    }
  }
}
.instructions {
  width: 100% !important;
  height: 20px !important;
  margin-top: 20px !important;
  text-align: center;
  color: #c3c3c3;
  font-size: 12px;
}
.Submitaudit {
  width: 100% !important;
  height: 20px !important;
  margin-top: 20px !important;
  text-align: center;
  span {
    display: inline-block;
    width: 30%;
    height: 42px;
    line-height: 42px;
    background: rgba(58, 203, 204, 1);
    border-radius: 21px;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
  }
}
/*上传图片样式*/
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 238px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 238px;
  height: 178px;
  display: block;
}
.Realnameauthentication-con-footer {
  position: relative;
  width: 90%;
  height: 200px;
  margin: 0 auto;
  border: 1px dotted #3acbcc;
  margin-top: 20%;
  bottom: 80px;
  ul {
    position: relative;
    width: 90%;
    margin: 0 auto;
    margin-top: 10px;
    padding: 0%;
    li {
      margin-top: 14px;
      font-size: 12px;
      color: #6d6d6d;
      list-style-position: inside;
      &:last-child {
        list-style: none;
        line-height: 20px;
        list-style-position: outside;
        padding-left: 3%;
      }
    }
  }
}

.Realnameauthentication-con-footer-title {
  position: relative;
  width: 90%;
  color: #ff7336;
  height: 20px;
  line-height: 20px;
  margin: 0 auto;
  font-size: 12px;
  margin-top: 20px;
  font-weight: bold;
}
</style>